<template>
  <transition name="loader-fade">
    <div v-show="visible" class="thinking-loader-container" :class="containerClass">
      <div class="loader-content">
        <div v-if="showIcon" class="loader-icon">
          <i :class="['fa', iconClass, 'text-primary text-4xl']"></i>
        </div>
        <h3 v-if="title" class="loader-title text-lg font-medium mb-2">{{ title }}</h3>
        <p v-if="message" class="loader-message text-gray-500 text-sm mb-4">{{ message }}</p>

        <!-- 思考动画 -->
        <div class="thinking-animation" :class="animationStyle">
          <div v-if="animationStyle === 'dots'" class="dot-group">
            <div class="dot thinking-dot-1"></div>
            <div class="dot thinking-dot-2"></div>
            <div class="dot thinking-dot-3"></div>
          </div>

          <div v-else-if="animationStyle === 'wave'" class="wave-group">
            <div class="wave thinking-wave-1"></div>
            <div class="wave thinking-wave-2"></div>
            <div class="wave thinking-wave-3"></div>
          </div>

          <div v-else-if="animationStyle === 'pulse'" class="pulse-dot"></div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'ThinkingLoader',
  props: {
    // 加载器标题
    title: {
      type: String,
      default: '正在思考'
    },
    // 加载器消息
    message: {
      type: String,
      default: '请稍候，我正在处理您的请求...'
    },
    // 是否显示图标
    showIcon: {
      type: Boolean,
      default: true
    },
    // 图标类名
    iconClass: {
      type: String,
      default: 'fa-lightbulb-o'
    },
    // 动画样式：dots, wave, pulse
    animationStyle: {
      type: String,
      default: 'dots',
      validator: (value) => ['dots', 'wave', 'pulse'].includes(value)
    },
    // 容器类名
    containerClass: {
      type: String,
      default: ''
    },
    // 是否可见
    visible: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    visible(newVal) {
      // 触发显示/隐藏事件
      this.$emit(newVal ? 'show' : 'hide');
    }
  }
}
</script>

<style scoped>
.thinking-loader-container {
  display: flex;
  justify-content: left;
  align-items: center;
  padding: 16px;
}

.loader-content {
  text-align: center;
}

.loader-icon {
  margin-bottom: 12px;
}

.loader-title {
  color: #333;
}

.loader-message {
  color: #666;
}

.thinking-animation {
  margin-top: 16px;
}

/* 圆点动画样式 */
.dot-group {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #4F46E5;
}

.thinking-dot-1 {
  animation: dot-bounce 1.4s infinite ease-in-out both;
}

.thinking-dot-2 {
  animation: dot-bounce 1.4s infinite ease-in-out 0.2s both;
}

.thinking-dot-3 {
  animation: dot-bounce 1.4s infinite ease-in-out 0.4s both;
}

@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* 波浪动画样式 */
.wave-group {
  display: flex;
  justify-content: center;
  gap: 4px;
  height: 20px;
}

.wave {
  width: 6px;
  border-radius: 3px;
  background-color: #4F46E5;
}

.thinking-wave-1 {
  animation: wave-grow 1.2s infinite ease-in-out;
}

.thinking-wave-2 {
  animation: wave-grow 1.2s infinite ease-in-out 0.1s;
}

.thinking-wave-3 {
  animation: wave-grow 1.2s infinite ease-in-out 0.2s;
}

@keyframes wave-grow {
  0%, 40%, 100% { transform: scaleY(0.4); }
  20% { transform: scaleY(1); }
}

/* 脉冲动画样式 */
.pulse-dot {
  width: 16px;
  height: 16px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #4F46E5;
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.7; }
  50% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.7; }
}

/* 显示/隐藏动画 */
.loader-fade-enter-active, .loader-fade-leave-active {
  transition: all 0.3s ease;
}

.loader-fade-enter-from, .loader-fade-leave-to {
  opacity: 0;
  transform: scale(0.95);
}
</style>
